<script setup lang="ts">
// import TUIConversation from '@/TUIKit/components/TUIConversation/index'
import ConversationList from '@/TUIKit/components/TUIConversation/conversation-list/index.vue'
import { TUIGlobal } from '@tencentcloud/universal-api'
import { messagePageAPI, messageReadBatchAPI } from '@/api/message'

import { messageUnreadCountAPI } from '@/api/message'
import { onHide } from '@dcloudio/uni-app'
import { getImg } from '@/utils/util'

const emits = defineEmits(['handleSwitchConversation'])
const conversationListDomRef = ref<typeof ConversationList>()

const handleSwitchConversation = (conversationID: string) => {
    TUIGlobal?.navigateTo({
        url: '/TUIKit/components/TUIChat/index'
    })
    emits('handleSwitchConversation', conversationID)
}

const getPassingRef = (ref) => {
    ref.value = conversationListDomRef.value
}
const closeChildren = () => {
    // headerRef?.value?.closeChildren();
    conversationListDomRef?.value?.closeChildren()
}

onHide(closeChildren)
const unreadCount = ref({
    collection: 0,
    comment: 0,
    fans: 0,
    like: 0,
    likeAndCollection: 0,
    order: 0,
    service: 0,
    system: 0
})
// 获取未读消息数量
const getUnreadCount = () => {
    messageUnreadCountAPI().then((res) => {
        if (res.code === 0) {
            console.log(res.data)
            unreadCount.value = res.data
        }
    })
}
onShow(async () => {
    getUnreadCount()

    // 获取系统通知  服务通知
    await getSytAndserFn(1)
    await getSytAndserFn(2)
})

const sytAndserObj = reactive({})

const getSytAndserFn = async (type: number) => {
    const res = await messagePageAPI({
        bizTab: type
    })

    if (type === 1) {
        console.log('系统通知', res)
        sytAndserObj.styContent = res.data.records[0] && res.data.records[0].content
        sytAndserObj.styCreateTime = res.data.records[0] && res.data.records[0].createTime
    } else {
        console.log('服务通知', res)

        sytAndserObj.serContent = res.data.records[0] && res.data.records[0].content
        sytAndserObj.serCreateTime = res.data.records[0] && res.data.records[0].createTime
    }
}

const notificationList = computed(() => {
    return [
        {
            title: '系统通知',
            content: sytAndserObj.styContent || '',
            icon: getImg('/img/icon/message/sNoti.png'),
            time: sytAndserObj.styCreateTime || '',
            unreadCount: unreadCount.value.system,

            click: () => {
                // TUIGlobal.openSettingPage('notification')
                uni.navigateTo({
                    url: '/views/subViews/msg/serviceNotice?type=system'
                })
            }
        },
        {
            title: '服务通知',
            content: sytAndserObj.serContent || '',
            icon: getImg('/img/icon/message/serNoti.png'),
            unreadCount: unreadCount.value.service,
            time: sytAndserObj.serCreateTime || '',
            click: () => {
                uni.navigateTo({
                    url: '/views/subViews/msg/serviceNotice?type=service'
                })
            }
        }
    ]
})
</script>

<template>
    <view>
        <wxTopStatus :coustom="true" :isBack="false" backgroundColor="#fff">
            <view class="nav-title"> 消息 </view>
        </wxTopStatus>
        <view class="grid-3 top-count-box">
            <view class="count-item" @click="$jump('/views/subViews/msg/commentRecover')">
                <image mode="widthFix" :src="$getImg('/img/icon/message/comment.png')"></image>
                <view class="count flex-center">{{ unreadCount.comment }}</view>
            </view>
            <view class="count-item" @click="$jump('/views/subViews/msg/fensi')">
                <image mode="widthFix" :src="$getImg('/img/icon/message/fensi.png')"></image>
                <view class="count flex-center">{{ unreadCount.fans }}</view>
            </view>

            <view class="count-item" @click="$jump('/views/subViews/msg/zan')">
                <image mode="widthFix" :src="$getImg('/img/icon/message/like.png')"></image>
                <view class="count flex-center">{{ unreadCount.likeAndCollection }}</view>
            </view>
        </view>

        <ConversationList
            ref="conversationListDomRef"
            class="tui-conversation-list"
            @handleSwitchConversation="handleSwitchConversation"
            @getPassingRef="getPassingRef"
            :notificationList="notificationList"
        />

        <!--        <TUIConversation />-->
    </view>
    <tabbar></tabbar>
</template>

<style scoped lang="scss">
.nav-title {
    font-size: 22px;
    font-weight: 700;
    padding-left: 30rpx;
}

.top-count-box {
    padding: 20rpx 44rpx;
    gap: 30rpx;
    position: relative;
    .count-item {
        position: relative;
        width: 100%;
        image {
            width: 100%;
        }
        .count {
            position: absolute;
            background-color: #ff6c3b;
            border: 2rpx solid #fff;
            height: 30rpx;
            min-width: 30rpx;
            padding: 20rpx 12rpx;
            color: #fff;
            font-weight: 700;
            border-radius: 999rpx;
            right: -10rpx;
            font-size: 12px;
            top: -10rpx;
        }
    }
}
</style>
